<template>
  <el-dialog v-bind="$attrs" width="1000px" :title="dialogForm.id ? '修改活动' : '新增活动'" top='5vh' center>
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules" label-width="auto" :disabled="isDetail">
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称" prop="name">
            <el-input v-model="dialogForm.name" placeholder="请输入名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="批次" prop="batch">
            <el-input v-model="dialogForm.batch" placeholder="请输入批次" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="dialogForm.contacts" placeholder="请输入联系人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="contactNumber">
            <el-input v-model="dialogForm.contactNumber" placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在区" prop="areaCode">
            <el-select v-model="dialogForm.areaCode" placeholder="请选择所在区">
              <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所处领域" prop="fieldStudy">
            <el-input v-model="dialogForm.fieldStudy" type="textarea" placeholder="请输入所处领域" rows="5" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="承担单位或组成单位" prop="undertakingUnits">
            <el-input v-model="dialogForm.undertakingUnits" type="textarea" placeholder="请输入承担单位或组成单位" rows="5" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="推荐单位" prop="recommendedUnits">
            <el-input v-model="dialogForm.recommendedUnits" type="textarea" placeholder="请输入推荐单位" rows="5" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onclose()">取消</el-button>
        <el-button type="primary" @click="submit(false)" v-if="isFabu">保存</el-button>
        <el-button type="primary" @click="submit(true)" v-if="!isDetail">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { defineComponent, reactive, ref, toRefs, watch, computed } from 'vue'
import Editor from '@/components/Editor/index.vue'
import FileUpload from "@/components/FileUpload/index.vue"
import { updateListNewStanTechOrgById } from "@/api/api"
import { cityList } from "@/utils/enum"
export default defineComponent({
  components: { Editor, FileUpload },
  props: {
    dataForm: Object,
    isDetail: {
      type: Boolean,
      default: false
    },
    isFabu: {
      type: Boolean,
      default: false
    },
  },
  setup (props, { emit }) {
    const dialogFormRef = ref()
    const dataMap = reactive({
      dialogForm: {},
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        batch: [{ required: true, message: '请输入批次', trigger: 'blur' }],
        contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        contactNumber: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        areaCode: [{ required: true, message: '请选择所在区', trigger: 'change' }],
        fieldStudy: [{ required: true, message: '请输入所处领域', trigger: 'blur' }],
        undertakingUnits: [{ required: true, message: '请输入承担单位或组成单位', trigger: 'blur' }],
        recommendedUnits: [{ required: true, message: '请输入推荐单位', trigger: 'blur' }],
      }
    })
    const methodsMap = reactive({
      onclose () {
        emit('close')
      },
      submit (flag) {
        dialogFormRef.value.validate(valid => {
          if (valid)
          {
            let params = {
              ...dataMap.dialogForm,
            }
            params.areaName=cityList.find(item=>item.value==params.areaCode).label
            updateListNewStanTechOrgById(params).then(res => {
              setTimeout(() => {
                emit('getDatas')
                emit('close')
              }, 500)
            })
          } else
          {
            return false
          }
        })
      }
    })
    onMounted(() => {

      let defaultData = {
        name: "",
        areaCode: "",
        areaName: "",
        batch: "",
        contactNumber: "",
        contacts: "",
        fieldStudy: "",
        recommendedUnits: "",
        undertakingUnits: "",
      }
      if (props.dataForm)
      {
        let temp = JSON.parse(JSON.stringify(props.dataForm))
        if (temp.label)
        {
          temp.label = temp.label.split(";")
        }
        if (temp.exerciseStartTime && temp.exerciseEndTime)
        {
          temp.exerciseTime = [temp.exerciseStartTime, temp.exerciseEndTime]
        }
        dataMap.dialogForm = {
          ...defaultData,
          ...temp
        }
      } else
      {
        dataMap.dialogForm = {
          ...defaultData
        }
      }
    })
    return {
      ...toRefs(dataMap),
      ...toRefs(methodsMap),
      dialogFormRef,
      cityList
    }
  },
})
</script>
